<template>

  <div class="app">
    <el-main>
      <div class="container">
        <div class="status-bar">
          <div class="status-group">
            <!--            状态区-->
            <div
                v-for="(status, index) in state.TagStatuses"
                :key="index"
                :class="{ active: activeIndex === index }"
                @click="handleStatusClick(index)"
                class="status-item"
            >
              <div :style="getStatusStyle(index)">
                <div v-if="index===0">
                  {{status.label}}
                </div>
                <div v-if="index===1">
                  {{ status.label }}
                </div>
                <div v-if="index===2">
                  {{ status.label }}
                </div>
              </div>
              <div v-if="index < state.TagStatuses.length - 1" class="separator"></div>
            </div>
          </div>
        </div>
      </div>


      <div v-if="activeIndex === 0">
        <!-- 账单明细的内容 -->
        <el-table :data="state.tableData" style="margin-top: 20px" @selection-change="handleSelectionChange" ref="elTableRef">
<!--          <el-table-column type="selection" width="55"></el-table-column>-->
          <el-table-column label="月份" prop="month"></el-table-column>
          <el-table-column label="人工坐席数" :width="120" prop="rgzxs"></el-table-column>
          <el-table-column label="人工坐席单价" :width="120" prop="rgzxdj" :formatter="formatWithUnit('元/个')"></el-table-column>
          <el-table-column label="AI接听数" :width="120" prop="aijts"></el-table-column>
          <el-table-column label="AI外呼计费时长" :width="130" prop="aiwhjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
          <el-table-column label="AI外呼单价" :width="120" prop="aiwhdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
          <el-table-column label="语音通知接听数" :width="130" prop="yytzjts"></el-table-column>
          <el-table-column label="语音通知计费时长" :width="140" prop="yytzjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
          <el-table-column label="语音通知单价" :width="120" prop="yytzdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
          <el-table-column label="人工接听数" :width="120" prop="rgjts"></el-table-column>
          <el-table-column label="人工外呼计费时长" :width="140" prop="rgwhjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
          <el-table-column label="人工外呼单价" :width="120" prop="rgwhdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
          <el-table-column label="短信计费数" :width="120" prop="dxjfs"></el-table-column>
          <el-table-column label="短信单价" :width="120" prop="dxdj" :formatter="formatWithUnit('元/条')"></el-table-column>
          <el-table-column label="AI外呼计费总额" :width="130" prop="aiwhjfze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="语音通知计费总额" :width="140" prop="yytzjfze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="AI坐席收费总额" :width="130" prop="aizxsfze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="人工坐席计费总额" :width="140" prop="rgzxjfze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="短信计费金额" :width="120" prop="dxjfze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="总计费金额" :width="120" prop="zjfje" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="减免金额" :width="120" prop="jmze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="应收金额" :width="120" prop="ysze" :formatter="formatWithUnit('元')"></el-table-column>
          <el-table-column label="操作" :width="200">
            <template v-slot:default="{row}">
              <el-button type="primary" @click="DailyBill(row)">日结账单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div v-else-if="activeIndex === 1">
        <!-- 充值/结算记录的内容 -->
        <el-table :data="state.tableDataRecord" style="margin-top: 20px">
          <el-table-column label="金额" prop="fczje"></el-table-column>
          <el-table-column label="变更后账户余额" prop="fbghzhye"></el-table-column>
          <el-table-column label="转账凭证号" prop="fzzpzh"></el-table-column>
          <el-table-column label="备注" prop="fbz"></el-table-column>
          <el-table-column label="时间" prop="fczsj" :formatter="row => new Date(row.fczsj).toLocaleString()"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:default="{row}">
              <el-button type="danger" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <div v-else-if="activeIndex === 2">
        <!-- 充值的内容 -->
        <el-container style="width: 40%;height: 100px;">
          <el-alert
              title="目前仅支持对公转账，后续会开通线上充值"
              type="info"
              :closable="false"
              show-icon
              center
              style="background-color: rgb(255,255,229);"
          />
        </el-container>
        <h2 style="margin-top: 10px">对公账号</h2>
        <div>
          <el-table :data="state.tableDataCharge" style="width: 40%">
            <el-table-column label=" " prop="col1"></el-table-column>
            <el-table-column label=" " prop="col2"></el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 15px">
          打款后请通知商务人员，商务人员会安排财务审核后充值
        </div>
      </div>
    </el-main>
  </div>

  <el-dialog v-model="DailyBillVisible" width="1400px" title="日结账单">
    <el-table :data="state.DaytableData" style="margin-top: 20px" ref="elTableRef" border>
      <el-table-column label="日期" prop="day"></el-table-column>
      <el-table-column label="AI接听数" :width="120" prop="aijts"></el-table-column>
      <el-table-column label="AI外呼计费时长" :width="130" prop="aiwhjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
      <el-table-column label="AI外呼单价" :width="120" prop="aiwhdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
      <el-table-column label="语音通知接听数" :width="130" prop="yytzjts"></el-table-column>
      <el-table-column label="语音通知计费时长" :width="140" prop="yytzjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
      <el-table-column label="语音通知单价" :width="120" prop="yytzdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
      <el-table-column label="AI坐席计费数" :width="120" prop="aizxjfs"></el-table-column>
      <el-table-column label="AI坐席单价" :width="120" prop="aizxdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
      <el-table-column label="人工接听数" :width="120" prop="rgjts"></el-table-column>
      <el-table-column label="人工外呼计费时长" :width="140" prop="rgwhjfsc" :formatter="formatWithUnit('分钟')"></el-table-column>
      <el-table-column label="人工外呼单价" :width="120" prop="rgwhdj" :formatter="formatWithUnit('元/分钟')"></el-table-column>
      <el-table-column label="人工坐席数" :width="120" prop="rgzxs"></el-table-column>
      <el-table-column label="人工坐席单价" :width="120" prop="rgzxdj" :formatter="formatWithUnit('元/个')"></el-table-column>
      <el-table-column label="挂机短信计费数" :width="120" prop="gjdxjfs"></el-table-column>
      <el-table-column label="群发短信计费数" :width="120" prop="qfdxjfs"></el-table-column>
      <el-table-column label="短信单价" :width="120" prop="dxdj" :formatter="formatWithUnit('元/条')"></el-table-column>
      <el-table-column label="AI外呼计费总额" :width="130" prop="aiwhjfze" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="人工坐席费用总额" :width="140" prop="rgzxfyze" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="人工外呼计费总额" :width="120" prop="rgwhjfze" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="AI坐席费用总额" :width="120" prop="aizxfyze" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="短信收费金额" :width="120" prop="dxsfje" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="语音通知计费总额" :width="120" prop="yytzjfze" :formatter="formatWithUnit('元')"></el-table-column>
      <el-table-column label="总应收金额" :width="120" prop="zysze" :formatter="formatWithUnit('元')"></el-table-column>
    </el-table>
  </el-dialog>


</template>


<script setup>
import {onMounted, onUnmounted, reactive, ref} from "vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";
import {useAccount} from "@/pinia/modules/account";


const state = reactive({
  TagStatuses : [
    { label: '账单明细' },
    { label: '充值/结算记录' },
    { label: '充值' }
  ],
  searchCriteria : {},
  tableData:[],
  DaytableData: [],
  tableDataRecord: [],
  tableDataCharge :[
    { col1: '户名', col2: '****有限公司' },
    { col1: '开户行', col2: '****支行' },
    { col1: '账户号码', col2: '1234****5678' }
  ]
})

const activeIndex = ref(0);

//筛选状态信息
const handleStatusClick = (index) => {
  if (activeIndex.value !== index) {
    state.searchCriteria = {}
  }
  activeIndex.value = index;
}

//动态渲染当前选中的状态
const getStatusStyle = (index) => ({
  color: activeIndex.value === index ? 'blue' : 'black',
  marginLeft: '30px',
  marginRight: '30px',
});

//多选框
const handleSelectionChange =(val)=>{
  state.multipleSelection = val;
  // selectAll.value = state.tableData.length && val.length === state.tableData.length;
}


//全选功能
const elTableRef = ref(null);
const selectAll = ref(false);
const handleSelectAll = () => {
  elTableRef.value.clearSelection(); // 先清除所有的选择
  if (selectAll.value) {
    elTableRef.value.toggleAllSelection(); // 如果是全选状态，则全选所有行
  }
};

// let user = localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):null;
// let fGsid = user.fgsid

const account = useAccount()
let fGsid = account.userinfo.gsId


const load = () => {

  request.post("/bill/find/"+fGsid).then(res =>{
    console.log(res.data)

    state.tableData = res.data
  })

}

onMounted(() => {
  const storedIndex = sessionStorage.getItem('activeIndex');
  if (storedIndex !== null) activeIndex.value = Number(storedIndex);
  loadRecord()
  load()

});

onUnmounted(() => {
  sessionStorage.removeItem('activeIndex'); // 移除 activeIndex 项
});


//充值、结算记录
const loadRecord =() =>{
  request.get("/czjl/find").then(res=>{
    state.tableDataRecord = res.data
  })
}

const handleDelete = (row) => {
  // 显示确认对话框
  ElMessageBox.confirm('确定删除该记录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(()=>{
    request.post("/czjl/del/"+row.fid).then(res=>{
        ElMessage.success('删除成功')
        loadRecord()
      }).catch(error => {
        console.log(error);
        ElMessage.error('删除失败')
    })
  })
};

const formatWithUnit = (unit) => {
  return (row, column, cellValue) => {
    if (typeof cellValue === 'number' || typeof cellValue === 'string') {
      return `${cellValue} ${unit}`;
    }
    return `N/A ${unit}`;
  };
};


const DailyBillVisible = ref(false)
const DailyBill =(row)=>{
  DailyBillVisible.value = true
  let month = row.month
  console.log(month)
  request.post(`/bill/findDailyBill/${fGsid}/${month}`).then(res =>{
    state.DaytableData = res.data
  })
}


</script>



<style>
.headerBg {
  background: #eee!important;
}
.box {
  background-color: #f1f1f1; /* 背景颜色 */
  border: 1px solid #ffffff; /* 边框，1px 宽，白色 */
  padding: 10px; /* 可选：添加内边距，以便使边框更明显 */
}
.actions-column {
  width: 200px;
}
.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow:0px 10px 10px -15px #000;
}
.status-bar {
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-group {
  display: flex;
  align-items: center;
}
.status-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.separator {
  width: 1px;
  height: 25px;
  background-color: #ccc;
  margin: 0 5px;
}
.button-column {
  margin-right: 15px;
}
.custom-form .el-form-item {
  margin-bottom: 4px; /* 设置每行的下边距为 3px */
}

</style>
